<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .judgeBox {
            width: 600px;
            /* height: 500px; */
            /* border: 1px solid #333; */
            margin: 100px auto;
            position: relative;
            user-select: none;
        }

        .bg {
            position: relative;
        }

        .bg img {
            width: 100%;
            /* height: 264px; */
            -webkit-user-drag: none;
        }

        .bg .boxA,
        .bg .boxB {
            width: 50px;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.6);
            position: absolute;
            top: 100px;
        }

        .bg .boxA {
            left: 0;
            background: url(../images/bg.webp) no-repeat -300px -100px/600px auto;
            z-index: 1;
        }

        .bg .boxB {
            left: 300px;
        }

        .slideBar {
            width: 100%;
            height: 50px;
            background-color: darksalmon;
            margin-top: 10px;
            position: relative;
            border-radius: 25px;
        }

        .ball {
            width: 50px;
            height: 50px;
            background-color: green;
            position: absolute;
            left: 0px;
            top: 0;
            border-radius: 50%;

        }
    </style>
</head>

<body>
    <div class="judgeBox">
        <div class="bg">
            <img class="bgImg" src="../images/bg.webp" draggable="false" alt="">
            <div class="boxA"></div>
            <div class="boxB"></div>
        </div>
        <div class="slideBar">
            <div class="ball"></div>
        </div>
    </div>
</body>
<script>
    var judgeBox = document.getElementsByClassName("judgeBox")[0];
    var bg = document.getElementsByClassName("bg")[0];
    var bgImg = document.getElementsByClassName("bgImg")[0];
    var slideBar = document.getElementsByClassName("slideBar")[0];
    var ball = document.getElementsByClassName("ball")[0];
    var boxA = document.getElementsByClassName("boxA")[0];
    var boxB = document.getElementsByClassName("boxB")[0];


    // 问题:
    // 图片加载受网速影响,如果网速较慢 等页面加载完毕之后,图片可能还未加载出来 => img无法撑开bg盒子 => 盒子高度 21px  => maxTop出现问题

    // 怎么解决?
    // 1. 给图片设置默认宽高
    // 2. 将代码放到window.onload => 等页面所有内容加载完(文档 img script)
    //    将代码放到bgImg.onload => 等图片所有内容加载完



    window.onload = function () {
        console.log("图片加载完毕", bgImg.width, bgImg.height);

        var maxLeft = slideBar.clientWidth - ball.clientWidth;
        var maxTop = bg.clientHeight - boxA.clientHeight;
        console.log(bg.clientHeight);

        // 页面加载时随机位置: 
        randPos();

        ball.onmousedown = function (e) {
            var e = e || window.event;
            // if (e.button != 0) return false;

            var posX = e.offsetX;

            document.onmousemove = function (e) {
                var e = e || window.event;

                var x = e.pageX - judgeBox.offsetLeft - posX;

                if (x < 0) x = 0;
                if (x > maxLeft) x = maxLeft;

                boxA.style.left = x + "px";
                ball.style.left = x + "px";
            }

            document.onmouseup = function () {
                document.onmousemove = null;

                // 拖拽验证  => boxA boxB重合时验证成功
                // 理想情况下: boxA.offsetLeft === boxB.offsetLeft => 对手残党不够友好
                //  => 设置误差允许范围  [boxB.offsetLeft-2,boxB.offsetLeft+2]
                // a.  boxA.offsetLeft>= boxB.offsetLeft-2 && boxA.offsetLeft <= boxB.offsetLeft+2
                // b.  Math.abs(boxA.offsetLeft-boxB.offsetLeft) <= 2

                if (boxA.offsetLeft) { // > 0
                    if (Math.abs(boxA.offsetLeft - boxB.offsetLeft) <= 2) {
                        console.log("验证成功");
                    } else {
                        console.log("验证失败,回到原位置");
                        boxA.style.left = 0 + "px";
                        ball.style.left = 0 + "px";

                        randPos();
                    }
                }


            }

        }

        function randPos() {

            // x: 200 - maxLeft
            var randX = 200 + Math.round(Math.random() * (maxLeft - 200));
            // y: 0 - maxTop;
            var randY = Math.round(Math.random() * maxTop);

            boxB.style.left = randX + "px";
            boxB.style.top = randY + "px";
            boxA.style.top = randY + "px";
            // boxA.style.backgroundPosition = (-randX) + "px " + (-randY) + "px";
            // boxA.style.backgroundPositionX = (-randX) + "px";
            // boxA.style.backgroundPositionY = (-randY) + "px";
            boxA.style.backgroundPosition = `-${randX}px -${randY}px`;
        }

    }





</script>

</html>